<template>
  <el-card class="tools-demo-container">
    <template #header>
      <div class="card-header">
        <span>工具库演示</span>
        <el-tag type="primary">Axios + Day.js + Lodash</el-tag>
      </div>
    </template>

    <el-tabs v-model="activeTab" type="border-card">
      <!-- Axios 演示 -->
      <el-tab-pane label="Axios" name="axios">
        <el-card shadow="hover">
          <template #header>
            <span>HTTP 请求演示</span>
          </template>
          <div class="demo-content">
            <el-button type="primary" @click="fetchData" :loading="axiosLoading">
              {{ axiosLoading ? '请求中...' : '获取示例数据' }}
            </el-button>
            <div v-if="axiosResponse" class="response-container">
              <el-divider content-position="left">响应数据</el-divider>
              <el-scrollbar height="300px">
                <pre>{{ JSON.stringify(axiosResponse, null, 2) }}</pre>
              </el-scrollbar>
            </div>
            <div v-if="axiosError" class="error-message">
              <el-alert :title="axiosError" type="error" show-icon />
            </div>
          </div>
        </el-card>
      </el-tab-pane>

      <!-- Day.js 演示 -->
      <el-tab-pane label="Day.js" name="dayjs">
        <el-card shadow="hover">
          <template #header>
            <span>日期处理演示</span>
          </template>
          <div class="demo-content">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-input v-model="dateInput" placeholder="输入日期 (YYYY-MM-DD)" />
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="formatDate">格式化</el-button>
              </el-col>
            </el-row>
            
            <el-divider content-position="left">日期格式示例</el-divider>
            <el-table :data="dateFormats" style="width: 100%">
              <el-table-column prop="format" label="格式" width="150" />
              <el-table-column prop="result" label="结果" />
            </el-table>
          </div>
        </el-card>
      </el-tab-pane>

      <!-- Lodash 演示 -->
      <el-tab-pane label="Lodash" name="lodash">
        <el-card shadow="hover">
          <template #header>
            <span>工具函数演示</span>
          </template>
          <div class="demo-content">
            <el-divider content-position="left">数组操作</el-divider>
            <el-row>
              <el-col :span="12">
                <el-input v-model="arrayInput" placeholder="输入数组元素，用逗号分隔" />
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="processArray">处理数组</el-button>
              </el-col>
            </el-row>
            
            <div v-if="processedArray" class="lodash-results">
              <el-row>
                <el-col :span="12">
                  <el-card shadow="hover">
                    <template #header>
                      <span>去重结果</span>
                    </template>
                    <p>{{ processedArray.uniq }}</p>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card shadow="hover">
                    <template #header>
                      <span>排序结果</span>
                    </template>
                    <p>{{ processedArray.sorted }}</p>
                  </el-card>
                </el-col>
              </el-row>
              
              <el-divider content-position="left">对象操作</el-divider>
              <el-card shadow="hover">
                <template #header>
                  <span>深拷贝示例</span>
                </template>
                <p>原对象: {{ originalObject }}</p>
                <p>深拷贝: {{ clonedObject }}</p>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import _ from 'lodash'

// 使用相对时间插件并设置中文
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

export default {
  name: 'ToolsDemoView',
  setup() {
    const activeTab = ref('axios')
    
    // Axios 相关状态
    const axiosLoading = ref(false)
    const axiosResponse = ref(null)
    const axiosError = ref('')
    
    // Day.js 相关状态
    const dateInput = ref('')
    const dateFormats = ref([])
    
    // Lodash 相关状态
    const arrayInput = ref('')
    const processedArray = ref(null)
    const originalObject = reactive({ name: '测试对象', nested: { value: 42 } })
    const clonedObject = ref({})
    
    // Axios 获取数据方法
    const fetchData = async () => {
      axiosLoading.value = true
      axiosError.value = ''
      try {
        // 使用公共API获取示例数据
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
        axiosResponse.value = response.data
      } catch (error) {
        axiosError.value = `请求失败: ${error.message || '未知错误'}`
      } finally {
        axiosLoading.value = false
      }
    }
    
    // Day.js 格式化日期方法
    const formatDate = () => {
      if (!dateInput.value) {
        // 如果没有输入，使用当前日期
        dateInput.value = dayjs().format('YYYY-MM-DD')
      }
      
      const date = dayjs(dateInput.value)
      if (!date.isValid()) {
        dateFormats.value = [{ format: '错误', result: '无效的日期格式' }]
        return
      }
      
      // 展示多种日期格式化结果
      dateFormats.value = [
        { format: 'YYYY-MM-DD', result: date.format('YYYY-MM-DD') },
        { format: 'MM/DD/YYYY', result: date.format('MM/DD/YYYY') },
        { format: 'YYYY年MM月DD日', result: date.format('YYYY年MM月DD日') },
        { format: 'YYYY-MM-DD HH:mm:ss', result: date.format('YYYY-MM-DD HH:mm:ss') },
        { format: 'dddd', result: date.format('dddd') },
        { format: 'MMM D, YYYY', result: date.format('MMM D, YYYY') },
        { format: '时间戳', result: date.valueOf() },
        { format: '相对时间', result: date.fromNow() }
      ]
    }
    
    // Lodash 处理数组方法
    const processArray = () => {
      if (!arrayInput.value) {
        // 如果没有输入，使用默认数组
        arrayInput.value = '1,2,3,2,4,5,3,6'
      }
      
      // 将输入字符串转换为数组
      const array = arrayInput.value.split(',').map(item => item.trim())
      
      // 使用 Lodash 进行数组操作
      processedArray.value = {
        uniq: _.uniq(array), // 去重
        sorted: _.sortBy(array) // 排序
      }
      
      // 演示深拷贝
      clonedObject.value = _.cloneDeep(originalObject)
      // 修改原对象，验证深拷贝
      originalObject.nested.value = 100
    }
    
    // 组件挂载时初始化一些数据
    onMounted(() => {
      formatDate() // 初始化日期格式示例
      processArray() // 初始化数组处理示例
    })
    
    return {
      activeTab,
      // Axios 相关
      axiosLoading,
      axiosResponse,
      axiosError,
      fetchData,
      // Day.js 相关
      dateInput,
      dateFormats,
      formatDate,
      // Lodash 相关
      arrayInput,
      processedArray,
      originalObject,
      clonedObject,
      processArray
    }
  }
}
</script>

<style scoped>
.tools-demo-container {
  margin: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-content {
  padding: 20px 0;
}

.response-container {
  margin-top: 20px;
}

.error-message {
  margin-top: 20px;
}

.lodash-results {
  margin-top: 20px;
}

pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>